import { Table } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { FC, useEffect, useRef, useState } from 'react';
import classnames from 'classnames';
import styles from './style.less';
// import Scrollbars from 'react-custom-scrollbars';

interface Iprops {
  columns: ColumnsType<any>;
  dataSource: any[];
  total?: number;
  onChange?: (page: number) => void;
  showHeader?: boolean;
  scroll?: any;
  showToast?: boolean;
  pageSize?: number;
  rowClassname?: string;
  currentPage?: number;
}

const InTable: FC<Iprops> = (props) => {
  const {
    onChange,
    columns,
    dataSource,
    total,
    showHeader,
    scroll,
    showToast,
    pageSize = 10,
    rowClassname = null,
    currentPage = 1,
  } = props;
  return (
    <div
      style={{
        overflow: 'hidden',
        position: 'relative',
      }}
    >
      <Table
        columns={columns}
        dataSource={dataSource}
        bordered={false}
        size="small"
        // components={{ table: components }}
        scroll={scroll}
        showHeader={showHeader}
        rowClassName={classnames(styles.row, rowClassname)}
        pagination={{
          size: 'small',
          pageSize: pageSize,
          total: total,
          showSizeChanger: false,
          current: currentPage,
          onChange: (p) => {
            onChange && onChange(p);
          },
          showTotal: showToast
            ? () => (total ? `共搜到${total}条数据` : '')
            : undefined,
        }}
      />
    </div>
  );
};

export default InTable;

// const renderThumb: FC<{ style: any }> = ({ style, ...props }) => {
//   const thumbStyle = {
//     width: '3px',
//     backgroundColor: '#7DE0FF',
//     opacity: '0.3',
//     borderRadius: '0px',
//     right: '-1px',
//   };
//   return <div style={{ ...style, ...thumbStyle }} {...props} />;
// };
